<template>
    <div class="transition_component">
        <!-- 添加专门的拖动区域 -->
        <div class="drag-region" data-tauri-drag-region></div>
        <TransitionHead />
        <TransitionSur :surInfo />
        <TransitionHun :hunInfo />
    </div>
</template>

<script setup lang='ts' name="TransitionIndex">
import storeHelper from '@/utils/TauriStore';
import BoardChannel from '@/utils/boardChannel';
import TransitionHead from './TransitionHead.vue';
import TransitionSur from './TransitionSur.vue';
import TransitionHun from './TransitionHun.vue';

const channel = new BoardChannel('bp-system');

const surInfo = reactive<SurInfo>({
    surTalent: [
        {
            hgfz: false,
            xtfs: false,
            hxwy: false,
            flxy: false
        },
        {
            hgfz: false,
            xtfs: false,
            hxwy: false,
            flxy: false
        },
        {
            hgfz: false,
            xtfs: false,
            hxwy: false,
            flxy: false
        },
        {
            hgfz: false,
            xtfs: false,
            hxwy: false,
            flxy: false
        }
    ],
    surPlayerNames: [null, null, null, null],
    surChars: []
});
const hunInfo = reactive<HunInfo>({
    hunTalent: {
        dp: false,
        zk: false,
        wl: false,
        jbkj: false
    },
    hunPlayerName: '',
    hunChar: ''
})
// 监听天赋更新
channel.on('updateTalent', async (componentType: 'talent-hun' | 'talent-sur') => {
    if (componentType === 'talent-sur') {
        const result = await storeHelper.get('hasTalentSur');
        if (result && typeof result === 'object') {
            Object.assign(surInfo, result);
        }
    }
    if (componentType === 'talent-hun') {
        const result = await storeHelper.get('hasTalentHun');
        if (result && typeof result === 'object') {
            Object.assign(hunInfo, result);
        }
    }
});
const _init = async () => {
    try {
        const surObject = await storeHelper.get('hasTalentSur');
        if (surObject && typeof surObject === 'object') {
            Object.assign(surInfo, surObject);
        };
        const hunObject = await storeHelper.get('hasTalentHun');
        if (hunObject && typeof hunObject === 'object') {
            Object.assign(hunInfo, hunObject);
        }
    } catch (error) {
        console.log(error);
    }
};
onMounted(() => {
    _init();
})
</script>
<style scoped lang='scss'>
.transition_component {
    width: 100vw;
    height: 100vh;
    cursor: move;
    overflow: hidden;
    display: grid;
    grid-template-rows: 90px auto;
    grid-template-columns: 578px auto;
    grid-template-areas:
        "Top Top"
        "Left Right";
    position: relative;

    .drag-region {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; // 与header高度一致
        z-index: 9999;
        /* 兼容性写法 */
    }
}
</style>